import React, { Component } from 'react';
import '../../../assets/styles/Controlpage.css'
import Juanlian from './component/Juanlian';
import Fengshan from './component/Fengshan'
import Pentou from './component/Pentou'
import Diguan from './component/Diguan'
import Deng from './component/Deng'
import Jiahao from './component/Jiahao'
class Index extends Component {
    state = {
        values: false,
        values1: false,
        values2: false,
        values3: false,
        values4: false,
        values5: false,
    }
    render() {
        const control = (e) => {
            if (e.target.nodeName !== 'BUTTON') return

            if (this.prev) {
                this.prev.style.backgroundColor = "rgb(167, 176,185)"
            }
            // 将当前选中的小圆点存储给prev
            this.prev = e.target;
            // 并且设置为红色
            this.prev.style.backgroundColor = "rgb(31,202,184)";
          
        }
        const swi = () => {
            this.setState({
                values: !this.state.values,
            })

        }

        const aaa=()=>{
            this.setState({
                values:false,
                values1: false,
                values2: false,
                values3: false,
                values4: false,
            })
        }
        const aaa1=()=>{
            this.setState({
                values: true,
                values1: true,
                values2: true,
                values3: true,
                values4: true,
            })
        }



        const swi1 = () => {
            this.setState({
                values1: !this.state.values1,
            })

        }
        const swi2 = () => {
            this.setState({
                values2: !this.state.values2,
            })

        }
        const swi3 = () => {
            this.setState({
                values3: !this.state.values3,
            })

        }
        const swi4 = () => {
            this.setState({
                values4: !this.state.values4,
            })

        }
    return(
            <div className = 'max' >
                <div className='zi'>所处场景</div>
                <div className='header'>
                    {/* <h1>wellcom</h1> */}
                    <p className='zizizizi'>欢迎进入阈值控制页面</p>
                    <div onClick={(e) => { control(e) }} className='kongzhi'>
                        <button onClick={() => { aaa1() }}>在家</button>

                        <button onClick={() => { aaa() }}>外出</button>
                    </div>
                </div>
                <div className='zi'>控制面板</div>
                <div className='content'>
                    <div className='juanlian'>
                        {/* <div id='main'> */}
                            <Juanlian value={this.state.values} aaa={swi}></Juanlian>
                        {/* </div> */}
                    </div>


                    <div className='fengshan'>
                        <Fengshan value={this.state.values1} aaa={swi1}></Fengshan>
                    </div>


                    <div>
                        <Pentou value={this.state.values2} aaa={swi2}></Pentou>
                    </div>


                    <div>
                        <Diguan value={this.state.values3} aaa={swi3}></Diguan>
                    </div>


                    <div>
                        <Deng value={this.state.values4} aaa={swi4}></Deng>
                    </div>

                    <div>
                       <Jiahao></Jiahao>
                    </div>


                </div>
            </div>
        );

    }
componentDidMount() {

}


}

export default Index;
